<template>
  <div class="box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="明细" name="first">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="mxForm"
                :model="mxForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="单号" prop="transportCode">
                  <el-input
                    v-model="mxForm.transportCode"
                    placeholder="请输入单号"
                    style="width: 286px"
                  />
                </el-form-item>
                <el-form-item label="所属网点" prop="networkNameId">
                  <el-select
                    v-model="mxForm.networkNameId"
                    placeholder="请选择所属网点"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="业务日期" style="width: 600px" prop="Time">
                  <el-date-picker
                    v-model="Time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="mxDateChange"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="getList">查询</el-button>
                  <el-button class="cz" @click="mxClear">重置</el-button>
                </el-form-item>
                <el-form-item label="面单类型" prop="sheetType">
                  <el-select
                    v-model="mxForm.sheetType"
                    placeholder="请选择面单类型"
                    style="width: 286px"
                  >
                    <el-option label="丰巢面单费" value="丰巢面单费" />
                    <el-option
                      label="惠惠商家寄面单费"
                      value="惠惠商家寄面单费"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算类型" prop="settleType">
                  <el-select
                    v-model="mxForm.settleType"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in jstype"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算对象" prop="settleObject">
                  <el-input
                    v-model="mxForm.settleObject"
                    placeholder="请输入请选择结算对象"
                    style="width: 286px"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ mxTableData.length }}</span>项
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="mxTableData"
                :loading="mxloading"
                :data="mxTableData"
                :th="mxth"
              >
                <template v-slot:after-columns>
                  <el-table-column v-if="mxTableData.length > 0" label="操作">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="edit(scope.row)"
                      >编辑</el-button>
                    </template>
                  </el-table-column>
                </template>
              </elltable>
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="mxForm.pageDate.pageNum"
            :page-size="mxForm.pageDate.pageSize"
            :total="mxTotal"
            @size-change="mxHandleSizeChange"
            @current-change="mxHandleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="汇总" name="second">
        <el-row>
          <el-col :span="24">
            <div class="header">
              <el-form
                ref="hzForm"
                :model="hzForm"
                label-width="100px"
                class="flex-start"
              >
                <el-form-item label="所属网点" prop="networkNameId">
                  <el-select
                    v-model="hzForm.networkNameId"
                    placeholder="请选择所属网点"
                  >
                    <el-option
                      v-for="item in networkList"
                      :key="item.id"
                      :label="item.networkName"
                      :value="item.networkName"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="汇总维度" prop="collectDimensionality">
                  <el-select
                    v-model="hzForm.collectDimensionality"
                    placeholder="请选择汇总维度"
                    style="width: 286px"
                    @change="handleDimensionalityChange"
                  >
                    <el-option label="月汇总" :value="2" />
                    <el-option label="日汇总" :value="1" />
                  </el-select>
                </el-form-item>

                <el-form-item label="时间范围">
                  <el-date-picker
                    v-show="hzForm.collectDimensionality == 2"
                    v-model="month"
                    value-format="yyyy-MM"
                    type="monthrange"
                    placeholder="选择月"
                    range-separator="至"
                    style="width: 672px"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    @change="hzMonthChange"
                  />

                  <el-date-picker
                    v-show="hzForm.collectDimensionality == 1"
                    v-model="Time"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 672px"
                    @change="hzDateChange"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button class="cx" @click="getHzList">查询</el-button>
                  <el-button class="cz" @click="hzClear">重置</el-button>
                </el-form-item>
                <el-form-item label="面单类型" prop="sheetType">
                  <el-select
                    v-model="hzForm.sheetType"
                    placeholder="请选择面单类型"
                    style="width: 286px"
                  >
                    <el-option label="丰巢面单费" value="丰巢面单费" />
                    <el-option
                      label="惠惠商家寄面单费"
                      value="惠惠商家寄面单费"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算类型" prop="settleType">
                  <el-select
                    v-model="hzForm.settleType"
                    placeholder="请选择结算类型"
                    style="width: 286px"
                  >
                    <el-option
                      v-for="(item, index) in jstype"
                      :key="index"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="结算对象" prop="settleObject">
                  <el-input
                    v-model="hzForm.settleObject"
                    placeholder="请输入请选择结算对象"
                    style="width: 286px"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div class="page">
              当前页共<span>{{ hzTableData.length }}</span>项
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>
              <elltable
                ref="hzTableData"
                v-loading="hzloading"
                border
                :data="hzTableData"
                :th="hzth"
              />
            </div>
          </el-col>
        </el-row>
        <div class="block" style="display: flex; justify-content: flex-end">
          <pagination
            :current-page="hzForm.pageDate.pageSize"
            :page-size="hzForm.pageDate.pageSize"
            :total="hzTotal"
            @size-change="hzHandleSizeChange"
            @current-change="hzHandleCurrentChange"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <!-- 明细 -->
      <el-form
        v-if="activeName == 'first'"
        ref="editMxForm"
        :model="editMxForm"
        label-width="80px"
      >
        <el-form-item label="结算类型">
          <el-select
            v-model="editMxForm.settleType"
            placeholder="请选择所属业务员"
            style="width: 286px"
          >
            <el-option label="业务员" value="业务员" />
            <el-option label="客户" value="客户" />
            <el-option label="承包区" value="承包区" />
          </el-select>
        </el-form-item>
        <el-form-item label="结算对象">
          <el-input v-model="editMxForm.settleObject" disabled />
        </el-form-item>
        <el-form-item label="面单费(元)">
          <el-input
            v-model="editMxForm.sheetFee"
            type="number"
            placeholder="只能输入数字"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTrue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOutletsList, feeFillCollectSearch, updateFeeFillCollect, feeFillCollectList } from '@/api/dashboard'
export default {
  data() {
    return {
      // 结算类型
      jstype: [
        { value: 0, label: '业务员' },
        { value: 1, label: '客户' },
        { value: 2, label: '承包区' }
      ],
      hzloading: false,
      mxloading: false,
      activeName: 'first',
      mxForm: {
        networkNameId: '',
        transportCode: '',
        startTime: '',
        endTime: '',
        sheetType: '',
        settleType: '',
        settleObject: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      show: 1,
      mxth: [],
      hzth: [],
      hzForm: {
        networkNameId: '',
        collectDimensionality: 1,
        startMonth: '',
        endMonth: '',
        startTime: '',
        endTime: '',
        sheetType: '',
        settleType: '',
        settleObject: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      editMxForm: {
        sheetFee: '',
        settleType: ''
      },
      currentPage1: 1,
      currentPage2: 1,
      mxTotal: 0,
      hzTotal: 0,
      mxTableData: [],
      hzTableData: [],
      networkList: [],
      month: [],
      Time: [],
      dialogVisible: false
    }
  },
  created() {
    // this.getList()
    this.getOutLet()
  },
  methods: {
    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 汇总列表
    getHzList() {
      if (this.hzForm.startMonth === '' && this.hzForm.startTime === '') {
        this.$message('请选择时间')
        return
      }
      this.hzloading = true
      feeFillCollectList(this.hzForm).then((res) => {
        if (res.code === 200) {
          this.hzTableData = res.data.list.data
          this.hzTotal = res.data.list.total
          this.hzth = res.data.fields
        } else {
          this.hzth = []
          this.hzTableData = []
          this.hzTotal = 0
        }
      })
      this.hzloading = false
    },
    // 修改明细
    edit(data) {
      this.editMxForm.settleObject = data.settleObject
      this.editMxForm.sheetFee = data.sheetFee
      this.editMxForm.settleType = data.settleType
      this.editMxForm.id = data.id

      this.dialogVisible = true
    },
    // 确认修改
    editTrue() {
      if (this.activeName === 'first') {
        this.editMxTrue()
      } else if (this.activeName === 'second') {
        this.editHzTrue()
      }
    },
    // 明细确认修改
    editMxTrue() {
      const ff = {
        settleObject: this.editMxForm.settleObject,
        sheetFee: this.editMxForm.sheetFee,
        id: this.editMxForm.id
      }
      updateFeeFillCollect(ff).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.getList()
        }
      })
    },
    // 明细重置
    mxClear() {
      this.Time = []
      this.mxForm.startTime = ''
      this.mxForm.endTime = ''
      this.$refs.mxForm.resetFields()
    },
    // 汇总重置
    hzClear() {
      this.Time = []
      this.month = []
      this.hzForm.startMonth = ''
      this.hzForm.endMonth = ''
      this.hzForm.startTime = ''
      this.hzForm.endTime = ''
      this.$refs.hzForm.resetFields()
    },
    // 明细表格列表
    getList() {
      this.mxloading = true
      feeFillCollectSearch(this.mxForm).then((res) => {
        if (res.code === 200) {
          this.mxTableData = res.data.list.data
          this.mxTotal = res.data.list.total
          this.mxth = res.data.fields
        } else {
          this.mxth = []
          this.mxTableData = []
          this.mxTotal = 0
        }
      })
      this.mxloading = false
    },

    handleClick(tab, event) {
      this.hzForm.collectDimensionality = 1
      this.Time = []
      this.month = []
    },
    // 承包日期根据月.日切换时间选择
    handleDimensionalityChange() {
      this.Time = []
      this.month = []
      this.hzForm.startMonth = ''
      this.hzForm.endMonth = ''
      this.hzForm.startTime = ''
      this.hzForm.endTime = ''
    },
    // 日期转换
    mxDateChange(value) {
      this.mxForm.startTime = value[0]
      this.mxForm.endTime = value[1]
    },
    // 获取汇总月份
    hzMonthChange(value) {
      this.hzForm.startMonth = value[0]
      this.hzForm.endMonth = value[1]
    },
    // 汇总日期转换
    hzDateChange(value) {
      this.hzForm.startTime = value[0]
      this.hzForm.endTime = value[1]
    },
    mxHandleSizeChange(val) {
      this.mxForm.pageDate.pageSize = val
      this.mxForm.pageDate.pageNum = 1
      this.getList()
    },
    mxHandleCurrentChange(val) {
      this.mxForm.pageDate.pageNum = val
      this.getList()
    },
    hzHandleSizeChange(val) {
      this.hzForm.pageDate.pageSize = val
      this.hzForm.pageDate.pageNum = 1
      this.getHzList()
    },
    hzHandleCurrentChange(val) {
      this.hzForm.pageDate.pageNum = val
      this.getHzList()
    }

  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.page > span {
  color: #2087d0;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
</style>
